<template>
  <div class="settings">
    <h3>个人设置</h3>
    <el-form label-position="right" label-width="120px" class="form">
      <el-form-item label="主键">
        <el-input type="text" v-model="user.id" disabled />
      </el-form-item>
      <el-form-item label="账号">
        <el-input type="text" v-model="user.account" />
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input type="text" v-model="user.email" />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input type="text" v-model="user.tel" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="update">确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 按需导入 Element Plus 组件
import { 
  ElButton, 
  ElForm, 
  ElFormItem,
  ElInput ,
  ElNotification 
} from 'element-plus';
export default {
  name: 'SettingsView',
  data(){
    return {
      user: {},
    }
  },
  methods: {
    update(){
      fetch('/back/user/update',{
        method: 'post',
        headers: { 
          'authorization': `Bearer ${sessionStorage.getItem( 'token' )}`,
          'content-type': 'application/json'
        },
        body: JSON.stringify( this.user )
      }).then( resp => resp.json() )
      .then( data => {
        if( data.code == 2301 ) {
          ElNotification({
            type: 'success',
            title: data.desc,
            message: `个人信息修改成功`,
          });
          return;
        }
        ElNotification({
            type: 'warning',
            title: data.desc,
            message: data.reason,
        });
      }).catch( cause => {
        ElNotification({
            type: 'error',
            title: '错误',
            message: cause,
        });
      });
    }
  },
  components: {
    ElButton, 
    ElForm, 
    ElFormItem,
    ElInput 
  },
  created(){
    fetch('/back/user/find',{
      method: 'GET',
      headers: { 'authorization': `Bearer ${sessionStorage.getItem( 'token' )}` }
    }).then( resp => {
      return resp.json();
    }).then( data => {
      if( data.code == 2201 ) {
        this.user = data.result ;
        return;
      }
      console.log( data.desc );
    }).catch( cause => {
      console.log( cause );
    });
  }
}
</script>

<style scoped>
h3 { text-align: center; }
</style>